<!-- 
请完善这个 Slack 卡片！

1. 这些按钮的棱角看上去有些突兀。请修改 CSS，让每个按钮都有 4px 的圆角边框。 done
2. 卡片最上方似乎有一个拼写错误。我不知道“学圆”是什么意思，但我相信这不是你想表达的意思。 done
3. 卡片按钮的字体似乎也不一致。请想办法统一字体吧。 done
4. 我们已经为你提供了一张占位符图像。请将这张图像设置为卡片上方的背景吧。 done
5. 请将按钮上显示的光标修改为手形鼠标，而不是箭头。 done
6. 如果你还有其他想法，请随意尝试，这是专属于你的 workspace！
-->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Slack 卡片</title>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
  <meta name="udacity-grader" content="tests.json">
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      font-family: 'Open Sans', sans-serif;
      color: #222;
    }

    .card {
      height: 475px;
      width: 325px;
      box-shadow: 0px 5px 15px 0px rgba(153, 153, 153, 0.5);
      border-radius: 4px;
    }

    .top {
      height: 55%;
      border-radius: 4px 4px 0px 0px;
      border: 1px solid #ddd;
      padding: 0px 16px;
      background-image: url(./profile-placeholder.svg);
    }

    .name {
      padding-top: calc(475px * 0.40);
      margin: 0px;
    }

    .status {
      display: inline-block;
      width: 10px;
      height: 10px;
      margin-left: 4px;

      border-radius: 5px;
      background-color: #60D156;
    }

    .title {
      margin-top: 8px;
    }

    .middle {
      height: 5%;
      border-left: 1px solid #ddd;
      border-right: 1px solid #ddd;
      padding: 0px 16px;
    }

    .time {
      color: #444;
      font-size: 0.8em;
      padding-top: 0.2em;
    }

    .bottom {
      height: 40%;
      border-radius: 0px 0px 4px 4px;
      border: 1px solid #ddd;
      padding: 8px 16px;
    }

    .profile-action {
      display: block;
      width: 100%;
      height: 20%;
      font-family: inherit;
      font-size: 1em;
      text-align: left;
      border-radius: 4px;
      border: 0px;
      background-color: white;
    }

    .profile-action:hover {
      background-color: #00A5D2;
      color: white;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <section>
    <div class="card">
      <div class="top">
        <h3 class="name">优达学城学院<span class="status"></span></h3>
        <p class="title">优秀学员</p>
      </div>
      <div class="middle">
        <div class="time">12:34 PM 当地时间</div>
      </div>
      <div class="bottom">
        <!-- 你看到了吗，这些按钮都有相同的 CSS 类。-->
        <button class="profile-action">用户偏好</button>
        <button class="profile-action">打开账户设置</button>
        <button class="profile-action">编辑资料</button>
        <button class="profile-action">查看资料</button>
        <button class="profile-action">注销</button>
      </div>
    </div>
  </section>
</body>

</html>